<!--
  Generated template for the PayPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-content style="height: 100%">

  <div style="height: 4rem;width: 100%;background-color: #f8f9fd;visibility:visible">
    <p style="padding: 0;margin: 0; text-align: center;line-height: 4rem;">支付详情</p>
  </div>



  <ion-card  style="padding: 0;border-radius:0.5rem;">
    <ion-card-content  style="padding:0; ">
      <div style="float:left;width:32%;height:32%;visibility:visible">
        <img  src="{{video.img}}" style="width:100%;height:7.8rem;border-radius:0.5rem;box-shadow: 1px 2px 2px 1px #dfdfdf">
      </div>
      <div style="margin-left:0.6rem;float:left;width:63%;">
        <div style="margin-top: 1rem;">
          <span style="padding-top:0.85rem;font-size:1.5rem;">{{video.name}}</span>
        </div>
        <p style="font-size:0.8rem;margin-top:0.4rem"> {{video.duration.substr(3,5)}}</p>
        <p style="font-size:0.8rem;margin-top:0.4rem;overflow: hidden;color: #afafb8;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;">{{video.depict}}</p>

        <span style="margin-top: 2rem; width: 8rem;height: 2rem;float: right;font-size: 1.2rem">小计：¥{{video.currentPrice}}</span>
      </div>

    </ion-card-content>
  </ion-card>
  <ion-card  style="padding: 0;border-radius:0.5rem;">
    <p style="float: right;padding-right: 1rem;font-size: 1.2rem;">总计：¥{{video.currentPrice}}</p>
  </ion-card>
  <div style="width: 100%;height: 3.5rem;position:fixed;bottom:0px;left:0px;">
    <div style="width: 75%;height:3.5rem; background-color: #f8f9fd;float:left;">
      <p style="line-height: 3.5rem;margin: 0;padding-left: 1rem;font-size: 1.3rem;">总计：¥{{video.currentPrice}}</p>
    </div>
    <div style="width: 25%; height: 3.5rem;background: #fe4f10;float:left;">
      <p style="line-height: 3.5rem;margin: 0;text-align: center;font-size: 1.2rem;color: #fff;" (click)="getPaydata()">微信支付</p>
    </div>
  </div>
</ion-content>
